import React, { useState, useEffect } from 'react'
import { Card, Button, Avatar, Drawer, Radio, Space, Form, Input, InputNumber, TreeSelect } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import { imgBaseUrl } from '../../config/globle';
import { getDeptDataApi } from '../../apis/user'
// import ProfileDrawer from './components/ProfileDrawer';

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

/* eslint-disable no-template-curly-in-string */
const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};

export default function Profile() {
    //获取当前用户
    const { avatar, username, roleName, ssex, mobile, email, deptName, description } = JSON.parse(localStorage.user);

    const [open, setOpen] = useState(false);
    const [placement, setPlacement] = useState('right');
    //存储部门数据
    const [deptData, setDeptData] = useState([]);
    //存储性别
    const [value, setValue] = useState(1);
    //存储当前用户
    const user = JSON.parse(localStorage.user);
    const sex = user.ssex.toString();
    useEffect(() => {
        getDeptData();
    }, [])

    const showDrawer = () => {
        //获取组件实例
        setOpen(true);
    };
    const onChange = (e) => {
        console.log("e",e);
        // setPlacement(e.target.value);
        setValue(e.target.value);
    };
    const onClose = () => {
        setOpen(false);
    };

    const onFinish = (values) => {
        console.log(values);
    };
    //获取部门数据
    async function getDeptData() {
        const deptDate = await getDeptDataApi();
        // formatMenus(deptDate.rows.children);
        setDeptData(deptDate.rows.children);
        // console.log("deptDate", deptDate);
    }
    return (
        <div>
            <Card
                title="个人中心"
                extra={<Button onClick={showDrawer}>
                    编辑资料
                </Button>}
                style={{
                    width: "100%",
                    height: "320px"
                }}
            >
                <div style={{ display: "flex" }}>
                    <div style={{ width: "200px", height: "220px" }}>
                        <div style={{ width: "150px", height: "150px", margin: "auto" }}>
                            <Avatar style={{ width: "150px", height: "150px" }} shape="square" src={imgBaseUrl + "/" + avatar} />
                        </div>
                        <div style={{ textAlign: "center", margin: "auto", marginTop: "10px" }}>
                            <Button icon={<EditOutlined />}>修改头像</Button>
                        </div>
                    </div>
                    <div style={{ width: "400px", height: "190px" }}>
                        <p style={{ margin: "0px", height: "27px" }}>账户:{username}</p>
                        <p style={{ margin: "0px", height: "27px" }}>角色：{roleName}</p>
                        <p style={{ margin: "0px", height: "27px" }}>性别：{ssex == 0 ? "女" : ssex == 1 ? "男" : "保密"}</p>
                        <p style={{ margin: "0px", height: "27px" }}>电话:{mobile}</p>
                        <p style={{ margin: "0px", height: "27px" }}>邮箱:{email}</p>
                        <p style={{ margin: "0px", height: "27px" }}>部门：{deptName}</p>
                        <p style={{ margin: "0px", height: "27px" }}>描述：{description}</p>
                    </div>
                </div>
            </Card>
            <>
                <Space>
                    <Radio.Group value={placement} onChange={onChange}>
                    </Radio.Group>

                </Space>
                <Drawer
                    title="编辑资料"
                    placement={placement}
                    width={500}
                    onClose={onClose}
                    open={open}
                    extra={<></>
                      }
                >
                    <div>
                        <Form {...layout} 
                        name="nest-messages" 
                        onFinish={onFinish} 
                        validateMessages={validateMessages}
                        initialValues={{
                            user: {
                              email: user.email,
                              mobile: user.mobile,
                              deptName: user.deptName,
                              ssex: sex,
                              description: user.description,
                            },
                          }}
                        >
                            <Form.Item
                                name={['user', 'email']}
                                label="邮箱"
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name={['user', 'mobile']}
                                label="手机"
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item label="部门" name={['user', 'deptId']}>
                                <TreeSelect
                                    treeData={deptData}
                                />
                            </Form.Item>
                            <Form.Item label="性别" name={['user', 'ssex']}
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Radio.Group onChange={onChange} value={value}>
                                    <Radio value={"0"}>男</Radio>
                                    <Radio value={"1"}>女</Radio>
                                    <Radio value={"2"}>保密</Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item name={['user', 'introduction']} label="描述">
                                <Input.TextArea />
                            </Form.Item>
                            <Form.Item style={{marginLeft:"300px",marginTop:"200px"}}>
                                <Space>
                                    <Button onClick={onClose}>取消</Button>
                                    <Button type="primary" htmlType="submit">
                                        提交
                                    </Button>
                                </Space>
                            </Form.Item>

                        </Form>
                    </div>
                </Drawer>
            </>

        </div>
    )
}
